<template>
  <div class="hostparticulars">
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/hotel' }">酒店</el-breadcrumb-item>
        <el-breadcrumb-item
          :to="{ path: '/hotel?city=' + hostparticulars.city.name }"
          v-if="hostparticulars.city"
        >
          {{ hostparticulars.city.name.replace(/市$/g, "") }}酒店
        </el-breadcrumb-item>
        <el-breadcrumb-item v-if="hostparticulars.name">
          {{ hostparticulars.name }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="nav">
      <div class="title">
        <h2>{{ hostparticulars.name }}</h2>
        <div class="huangguan" v-if="hostparticulars.hotellevel">
          <span
            class="iconfont iconhuangguan"
            v-for="item in hostparticulars.hotellevel.level"
            :key="item.id"
          ></span>
        </div>
      </div>
      <div>{{ hostparticulars.alias }}</div>
      <div>
        <span class="iconfont iconlocation"></span>
        {{ hostparticulars.address }}
      </div>
    </div>
    <div class="contentImg">
      <div class="bigImg">
        <img
          ref="imgRef"
          :src="'http://157.122.54.189:9093' + picList[currentPic]"
          :alt="hostparticulars.name"
        />
      </div>
      <div class="smallImg">
        <img
          @click="changeImgHandle(index)"
          v-for="(item, index) in picList"
          :key="index"
          :src="'http://157.122.54.189:9093' + item"
          :alt="hostparticulars.name"
        />
      </div>
    </div>
    <div class="reference">
      <div class="referencetitle">
        <div class="referencetitlea">价格来源</div>
        <div class="referencetitleb">低价房价</div>
        <div class="referencetitlec">最低价格/每晚</div>
      </div>
      <a href="https://hotels.ctrip.com/hotel/694679.html">
        <div
          class="hotel"
          v-for="items in hostparticulars.products"
          :key="items.id"
        >
          <div class="hotelname">{{ items.name }}</div>
          <div class="hotelsize">{{ items.bestType }}</div>
          <div class="hotelprice">
            <span>￥{{ items.price }}</span> 起
            <span class="el-icon-arrow-right"></span>
          </div>
        </div>
      </a>
    </div>
    <div class="map">
      <div class="mymap">
        <div id="mymap"></div>
      </div>
      <div class="mapdata">
        <el-tabs v-model="activeName" @tab-click="handleClick(activeName)">
          <el-tab-pane
            :label="item"
            :name="item"
            v-for="item in ['风景', '交通']"
            :key="item.id"
          >
            <ul>
              <li
                v-for="item in scenery"
                :key="item.id"
                @mouseover="MobileAccess(item.id)"
              >
                <div class="distancenav">
                  <div class="distance">{{ item.name }}</div>
                  <div>{{ item.distance / 1000 }}公里</div>
                </div>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="configuration">
      <div class="information">
        <div class="informationtop">基本信息</div>
        <div class="informationfooter">
          <div>入住时间：14:00之后</div>
          <div>离店时间：12:00之前</div>
          <div
            v-if="hostparticulars.creation_time && hostparticulars.renovat_time"
          >
            {{ hostparticulars.creation_time }}/{{
              hostparticulars.renovat_time
            }}
          </div>
          <div v-else>-/-</div>
          <div v-if="hostparticulars.roomCount">
            酒店规模：{{ hostparticulars.roomCount }}间客房
          </div>
        </div>
      </div>
      <div class="information">
        <div class="informationtop">主要措施</div>
        <div class="informationfooter" v-if="hostparticulars.hotelassets != ''">
          <span
            v-for="itemss in hostparticulars.hotelassets"
            :key="itemss.id"
            class="measure"
            >{{ itemss.name }}</span
          >
        </div>
        <div class="informationfooter" v-else>
          <span>-</span>
        </div>
      </div>
      <div class="information">
        <div class="informationtop">停车服务</div>
        <div class="informationfooter" v-if="hostparticulars.parking">
          <span>{{ hostparticulars.parking }}</span>
        </div>
        <div class="informationfooter" v-else>
          <span>-</span>
        </div>
      </div>
      <div class="information">
        <div class="informationtop">品牌信息</div>
        <div class="informationfooter" v-if="hostparticulars.hotelbrand">
          <span class="name">{{ hostparticulars.hotelbrand.name }}</span>
        </div>
        <div class="informationfooter" v-else>
          <span>-</span>
        </div>
      </div>
    </div>
    <div class="evaluate">
      <div>
        <h5>0条真实用户评价</h5>
      </div>
      <div class="evaluateflooer">
        <div class="evaluateflooerleft">
          <div>总评价数：{{ hostparticulars.all_remarks }}</div>
          <div>好评数：{{ hostparticulars.good_remarks }}</div>
          <div>差评数：{{ hostparticulars.bad_remarks }}</div>
        </div>
        <div class="evaluateflooerright">
          <div class="background" v-if="hostparticulars.stars">推荐</div>
          <div v-if="hostparticulars.stars" class="stars">
            <el-rate
              v-model="hostparticulars.stars"
              disabled
              show-score
              text-color="#ff9900"
              :score-template="hostparticulars.stars + '分'"
            ></el-rate>
          </div>
          <div class="scores" v-if="hostparticulars.scores">
            <div v-if="hostparticulars.scores">
              <el-progress
                type="circle"
                :stroke-width="2"
                :width="70"
                color="orange"
                :show-text="false"
                :percentage="hostparticulars.scores.environment * 10"
              ></el-progress>
              <span v-if="hostparticulars.scores.environment"
                >环境{{ hostparticulars.scores.environment }}</span
              >
            </div>
            <div v-if="hostparticulars.scores">
              <el-progress
                type="circle"
                :stroke-width="2"
                :width="70"
                color="orange"
                :show-text="false"
                :percentage="hostparticulars.scores.product * 10"
              ></el-progress>
              <span v-if="hostparticulars.scores.product"
                >产品{{ hostparticulars.scores.product }}</span
              >
            </div>
            <div v-if="hostparticulars.scores">
              <el-progress
                type="circle"
                :stroke-width="2"
                :width="70"
                color="orange"
                :percentage="hostparticulars.scores.service * 10"
                :show-text="false"
              ></el-progress>
              <span v-if="hostparticulars.scores.service"
                >服务{{ hostparticulars.scores.service }}</span
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      map: {},
      markers: [],
      scenery: [],
      location: [],
      locationMap: "",
      activeName: "风景",
      hostparticulars: "",
      currentPic: 0,
      //   图片列表
      picList: [
        "/images/hotel-pics/1.jpeg",
        "/images/hotel-pics/2.jpeg",
        "/images/hotel-pics/3.jpeg",
        "/images/hotel-pics/4.jpeg",
        "/images/hotel-pics/5.jpeg",
        "/images/hotel-pics/6.jpeg",
      ],
    };
  },
  methods: {
    mountedmap() {
      console.log(this.scenery);
      this.map = new AMap.Map("mymap", {
        zoom: 15,
        center: this.location,
      });
      this.sign();
      console.log(this.markers);
    },
    // 点击地图右侧tab栏切换
    handleClick(activeName) {
      this.mapRenderer(activeName);
    },
    // 鼠标移上tab信息触发地图响应
    MobileAccess(id) {
      this.markers.forEach((res) => {
        if (res.getExtData() == id) {
          // 将当前匹配的点置顶
          res.setTop(true);
          //提示内容
          const infoWindow = new AMap.InfoWindow({
            content: `<span style='font-size:12px;color:#333'>${res.getTitle()}</span>`,
            offset: new AMap.Pixel(0, -32),
          });
          infoWindow.open(this.map, res.getPosition());
          // 将当前的点设置为中心点
          this.map.setCenter(res.getPosition());
        }
      });
    },
    // 获取渲染地图数据
    mapRenderer(types) {
      return this.$axios({
        url: "https://restapi.amap.com/v3/place/around",
        params: {
          key: "baf861232be8288e0a9eee2ca6d8bef5",
          location: this.locationMap,
          types: types || "风景",
          radius: 50000,
        },
      }).then((res) => {
        this.scenery = res.data.pois;
        this.mountedmap();
        console.log(res);
      });
    },
    // 添加多个点标记
    sign() {
      this.markers = this.scenery.map((res, index) => {
        console.log(res.location.split(","));
        var marker = new AMap.Marker({
          title: res.name,
          position: res.location.split(","),
          extData: res.id,
          content: `<div class="mapImg">
                        <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" alt />
                        <span>${index + 1}</span>
                      </div>`,
        });
        // 鼠标在地图移动的时候，触发
        marker.on("mouseover", () => {
          return this.MobileAccess(res.id);
        });
        return marker;
      });
      // 清理多余的障碍物
      this.map.clearMap();
      // 添加标记
      this.map.add(this.markers);
    },
    changeImgHandle(index) {
      if (this.currentPic === index) return;
      this.currentPic = index;
      if (index % 2 === 0) {
        this.$refs.imgRef
          .execEffect({
            animate: "dissolve", // 动画类型
            size: 10,
            direct: "random",
            duration: 1000,
            target:
              "http://157.122.54.189:9093" + this.picList[this.currentPic],
          })
          .then(function () {
            console.log("执行成功");
          });
      } else {
        this.$refs.imgRef
          .execEffect({
            animate: "blinds", // 动画类型
            count: 10,
            direct: "bottom",
            target:
              "http://157.122.54.189:9093" + this.picList[this.currentPic],
          })
          .then(function () {
            console.log("执行成功");
          });
      }
    },
  },
  async mounted() {
    if (process.client) {
      require("../../assets/js/ct_effect");
      require("../../assets/js/ct_effect_dissolve");
      require("../../assets/js/ct_effect_blinds");
    }

    //   获取酒店id数据渲染
    await this.$axios({
      url: "/hotels",
      params: {
        id: this.$route.params.id,
      },
    }).then((res) => {
      this.hostparticulars = res.data.data[0];
      console.log(res);
      console.log(this.hostparticulars.location);
      var city = this.hostparticulars.location.longitude.toFixed(6);
      var citys = this.hostparticulars.location.latitude.toFixed(6);

      this.location.push(city, citys);
      this.locationMap = this.location.join(",");
      // console.log(arr);
      console.log(this.location);
    });
    // 获取渲染地图数据
    await this.mapRenderer();
    this.handleClick();
  },
};
</script>

<style lang="less" scoped>
.hostparticulars {
  width: 1000px;
  //   height: 2000px;
  margin: 20px auto;
  //   background-color: yellow;
  .huangguan {
    padding-left: 5px;
    padding-top: 10px;
    display: inline-block;
    .iconfont {
      color: orange;
    }
  }
  .nav {
    color: #444;
    margin: 20px 0;
  }
  .title {
    display: flex;
    h2 {
      font-weight: normal;
    }
  }
  .contentImg {
    margin-top: 40px;
    width: 1000px;
    height: 360px;
    display: flex;
    box-sizing: border-box;
  }
  .bigImg {
    flex: 4;
    // margin-right: 5px;
    img {
      width: 640px;
      height: 360px;
      // object-fit: cover;
    }
  }
  .smallImg {
    flex: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    // box-sizing: border-box;

    img {
      display: inline-block;
      width: 48%;
      margin: 0 0 15px;

      height: 110px;
      object-fit: cover;
    }
  }
  .reference {
    margin-top: 40px;
    width: 1000px;
    .referencetitle {
      font-weight: 700;
      display: flex;
      border-bottom: 1px solid #ccc;
      padding: 15px 10px;
      color: #888;
    }
    .referencetitlea,
    .referencetitleb {
      flex: 10;
    }
    .referencetitlec {
      flex: 4;
    }
    .hotel {
      display: flex;
      border-bottom: 1px solid #eee;
      padding: 15px 10px;
      color: #555;
    }
    .hotel:hover {
      background: #f5f7fa;
    }
    .hotelname,
    .hotelsize {
      flex: 10;
    }
    .hotelprice {
      span {
        color: orange;
      }
      flex: 4;
    }
  }
  .map {
    margin-top: 40px;
    width: 1000px;
    height: 360px;
    display: flex;
    // background: red;
  }
  .mymap {
    flex: 3;
    margin-right: 20px;
  }
  #mymap {
    width: 650px;
    height: 360px;
  }
  .mapdata {
    flex: 2;
    background: #fff;
    ul {
      height: 300px;
      overflow: auto;
      font-size: 14px;
      color: #666;
      line-height: 35px;
    }
    .distancenav {
      padding: 0 10px;
      display: flex;
    }
    .distance {
      flex: 1;
    }
  }

  .configuration {
    color: #888;
    margin-top: 30px;
    box-sizing: border-box;
  }
  .information {
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
    width: 1000px;
    display: flex;
    box-sizing: border-box;
  }
  .informationtop {
    color: #444;
    flex: 4;
  }
  .informationfooter {
    flex: 20;
    display: flex;
    .name {
      color: #444;
    }
    > div {
      flex: 1;
    }
  }
  .measure {
    border: 1px solid #eee;
    padding: 4px 10px;
    margin: 10px 10px 0 0;

    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 4px;
    background-color: #eee;
    color: #666;
    display: inline-block;
  }
  .evaluate {
    width: 1000px;
    margin-top: 40px;

    h5 {
      margin: 15px 0;
    }
  }
  .evaluateflooer {
    display: flex;
    // background: chartreuse;
    height: 75px;
  }
  // .evaluateflooerleft {
  // }
  /deep/.el-progress {
    // background-color: yellow;
    overflow: hidden;
  }
  .background {
    color: orange;
    position: absolute;
    left: 20px;
    border: 2px solid #fa3;
    text-align: center;
    line-height: 70px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    opacity: 0.25;
    transform: rotate(-30deg);
  }
  .evaluateflooerright {
    margin-left: 60px;
    position: relative;
    flex: 1;
    display: flex;
    .scores {
      display: flex;
      flex: 1;
      > div {
        margin-left: 50px;
        position: relative;
        span {
          color: orange;
          position: absolute;
          top: 50%;
          left: 50%;
          text-align: center;
          transform: translate(-50%, -50%);
        }
      }
    }
  }
  .stars {
    padding: 25px 0;
  }
  .el-progress /deep/ path:first-child {
    stroke: #fff;
  }
}
/deep/.mapImg {
  position: relative;

  height: 30px;
  img {
    width: 27px;
    object-fit: cover;
  }

  span {
    position: absolute;
    top: -4px;
    left: 3px;
    width: 20px;
    height: 30px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 12px;
  }
}
</style>
